<template>
  <div
    class="theme-icon"
    :class="{ active: active === name }"
    @click="handleClick"
    :title="tip"
  >
    <div class="theme-preview">
      <!-- 头部区域 -->
      <div class="preview-header" :style="{ backgroundColor: header }">
        <div class="header-dot"></div>
        <div class="header-line"></div>
      </div>

      <!-- 主体区域 -->
      <div class="preview-body">
        <!-- 侧边栏 -->
        <div class="preview-sidebar" :style="{ backgroundColor: menu }">
          <div class="sidebar-item"></div>
          <div class="sidebar-item"></div>
          <div class="sidebar-item active"></div>
        </div>

        <!-- 内容区域 -->
        <div class="preview-main" :style="{ backgroundColor: main }">
          <div class="main-content" :style="{ color: activeColor }"></div>
        </div>
      </div>
    </div>

    <div class="theme-name">{{ tip }}</div>
  </div>
</template>

<script setup lang="ts">
interface Props {
  name: string;
  active: string;
  tip: string;
  header: string;
  menu: string;
  main: string;
  activeColor: string;
}

interface Emits {
  (e: "update:active", value: string): void;
}

const props = defineProps<Props>();
const emit = defineEmits<Emits>();

const handleClick = () => {
  emit("update:active", props.name);
};
</script>

<style lang="scss" scoped>
.theme-icon {
  display: inline-block;
  margin-right: 16px;
  margin-bottom: 16px;
  cursor: pointer;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-2px);

    .theme-preview {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
  }

  &.active {
    .theme-preview {
      border-color: var(--el-color-primary);
      box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
    }

    .theme-name {
      color: var(--el-color-primary);
      font-weight: 500;
    }
  }
}

.theme-preview {
  width: 56px;
  height: 42px;
  border-radius: 6px;
  border: 2px solid var(--el-border-color-light);
  overflow: hidden;
  background: #fff;
  transition: all 0.3s ease;
}

.preview-header {
  height: 8px;
  display: flex;
  align-items: center;
  padding: 0 4px;
  gap: 2px;
}

.header-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
}

.header-line {
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.6);
}

.preview-body {
  display: flex;
  height: 32px;
}

.preview-sidebar {
  width: 16px;
  padding: 3px 2px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-item {
  height: 2px;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.6);

  &.active {
    background: rgba(255, 255, 255, 0.9);
    height: 3px;
  }
}

.preview-main {
  flex: 1;
  padding: 3px;
}

.main-content {
  width: 100%;
  height: 100%;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.1;
}

.theme-name {
  text-align: center;
  font-size: 12px;
  color: var(--el-text-color-regular);
  margin-top: 8px;
  transition: all 0.3s ease;
  line-height: 1.2;
}
</style>